<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
    <style>
        /* .v-enter   定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
           .v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
           .v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
           .v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
        */
        .v-enter,
        .v-leave-to{
            opacity:0;
            /*从150px位置偏移过来的*/
            transform: translateX(150px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 1s ease;
        }

        .my-enter,
        .my-leave-to{
            opacity:0;
            /*从150px位置偏移过来的*/
            transform: translateY(150px);
        }
        .my-enter-active,
        .my-leave-active{
            transition: all 1s ease;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="button" value="toggle" @click="flag = !flag">
    <transition>
        <h3 v-if="flag">这是个H3</h3>
    </transition>

<hr>


    <input type="button" value="toggle2" @click="flag2 = !flag2">
    <!--自定义v-前缀-->
    <transition name="my">
        <h6 v-if="flag2">这是个H6</h6>
    </transition>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            flag:true,
            flag2:true
        },
        methods:{

        }
    })
</script>
</body>
</html>